<template>
  <div style="height:100%;display:flex;flex-direction:column;align-content:stretch;justify-content:center">
		<div class="table-list" style="flex: 1 0;background: #000;padding:15px 15px 0 15px;">
			<div class="cus-table top-table-left bg-color1 haveBorder" style="display:flex;flex-direction:column;align-content:stretch;justify-content:center">
				<div class="table-row haveBorder-b" style="padding:5px 0;">
					5521/A002
				</div>
				<div class="table-row haveBorder-b" style="padding:5px 0;">
					<div class="table-cell">男子少年组/高级组</div>
				</div>
				<div class="table-row" style="margin:5px auto;">
					<div class="table-cell">中国超级足球联赛</div>
				</div>
			</div>
			<div class="cus-table2 haveBorder" style="flex:1 0">
				<div class="cus-table top-table-left" style="width:35%;display:flex;flex-direction:column;">
					<div class="table-row bg-color1 haveBorder-b haveBorder-r" style="flex:1 0;display:flex;">
						<div class="table-cell ctable-cell">预赛</div>
					</div>
					<div class="table-row bg-color3 ctable-cell haveBorder-r" style="flex:2 0">
						<div class="table-cell">6.0</div>
					</div>
				</div>
				<div class="cus-table top-table-left" style="width:65%;display:flex;flex-direction:column;">
					<div class="table-row bg-color1 haveBorder-b" style="flex:1 0;display:flex;">
						<div class="table-cell ctable-cell">
							<div>提交评分</div>
							</div>
					</div>
					<div class="table-row" style="display:flex;flex:2 0">
						<div class="table-cell bg-color2 ctable-cell haveBorder-r">
							<div>3.3</div>
						</div>
						<div class="table-cell bg-color4 ctable-cell">
							<div>3.3</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="table-list table-listb">
			<div class="t bg-color3">
				<div class="header">
					<span class="title">技术得分</span>
				</div>
				<div class="scoreList">
					<div>
						<span>0.8</span>信余额变动提醒活动宣传
					</div>
					<div>
						<span>0.8</span>信余额变动提醒活动宣传
					</div>
					<div>
						<span>0.8</span>信余额变动提醒活动宣传
					</div>
					<div>
						<span>0.8</span>信余额变动提醒活动宣传
					</div>
				</div>
			</div>
			<div class="t bg-color2">
				<div class="header">
					<span class="title">技术得分</span>
				</div>
				<div class="scoreList">
					<div>
						<span>0.8</span>信余额变动提醒活动宣传
					</div>
					<div>
						<span>0.8</span>信余额变动提醒活动宣传
					</div>
					<div>
						<span>0.8</span>信余额变动提醒活动宣传
					</div>
					<div>
						<span>0.8</span>信余额变动提醒活动宣传
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<style>
html { font-size:16px; }
</style>


<style lang="scss" scoped>
.table-listb{
flex: 2.5 0;
background: #000;
}
.ctable-cell{
	flex:1 0; display:flex; justify-content: center;flex-direction: column;
}
.haveBorder{
	border:2px solid #fff;
}
.haveBorder-b{
	border-bottom:2px solid #fff;
}
.haveBorder-r{
	border-right:2px solid #fff;
}
.title{
	background: #262626;
	border-radius: 10px;
	padding:  5px 2rem;
	    display: inline-block;
}

.bg-color1{
	background: #64278e;
	background: -webkit-linear-gradient(30deg, #64278e, #a745ea); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(30deg, #64278e, #a745ea); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(30deg, #64278e, #a745ea); /* Firefox 3.6 - 15 */
  background: linear-gradient(30deg, #64278e, #a745ea); /* 标准的语法 */
}
.bg-color2{
	background: #014c85;
	background: -webkit-linear-gradient(120deg, #014c85, #37a2f3); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(120deg, #014c85, #37a2f3); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(120deg, #014c85, #37a2f3); /* Firefox 3.6 - 15 */
  background: linear-gradient(120deg, #014c85, #37a2f3); /* 标准的语法 */
}
.bg-color3{
	background: #b83638;
	background: -webkit-linear-gradient(30deg, #b83638, #e85e61); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(30deg, #b83638, #e85e61); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(30deg, #b83638, #e85e61); /* Firefox 3.6 - 15 */
  background: linear-gradient(30deg, #b83638, #e85e61); /* 标准的语法 */
}
.bg-color4{
	background: #0b7c3e;
	background: -webkit-linear-gradient(30deg, #0b7c3e, #44de8a); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(30deg, #0b7c3e, #44de8a); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(30deg, #0b7c3e, #44de8a); /* Firefox 3.6 - 15 */
  background: linear-gradient(30deg, #0b7c3e, #44de8a); /* 标准的语法 */
}
.table-list{
	 text-align:center;
	font-size: 1.2rem;
	color: #fff;
	width: 100%;
	display: flex;
	flex-direction: column;
	.t{
		.header{
			background: #000;
			height: 50px;
			text-align: center;
			padding-top: 10px;
		}
			width: 100%;
		}
		.cus-table2{
			border-top: none;
			display: flex;
			width: 100%;
			>.top-table-left{
			width:33.33%;
			display: flex;
			flex-direction: column;
		}
		}
}
.scoreList>div{
	padding: 5px 10px;
	line-height: 30px;
	>span{
		display:inline-block;
		padding: 0 15px;
		background: #0b7c3e;
		border-radius: 8px;
		margin-right: 10px;
	background: -webkit-linear-gradient(0deg, #e24fc2, #d234bc, #ffa29d); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(0deg, #e24fc2, #d234bc, #ffa29d); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(0deg, #e24fc2, #ffa29d); /* Firefox 3.6 - 15 */
  background: linear-gradient(0deg, #e24fc2, #d234bc, #ffa29d); /* 标准的语法 */
	}
}
@media (min-width: 768px){ //>=768的设备
.scoreList>div{
	padding: 10px 20px;
	line-height: 35px;
}
.table-listb{
flex: 5 0;
}
.ctable-cell{
	height: inherit;
}
	.table-list{
		font-size: 2rem;
		display: flex;
		flex-direction: row;
		.cus-table2{
			border-top: 2px solid #fff;
			display: flex;
			width: 60%;
			
		}
		.t{
			width: 50%;
			.header{
			height: 70px;
			}
		}
		>.top-table-left{
			width: 40%;
			display: flex;
			flex-direction: row;
		}
	}
}

</style>
